<template>
  <div class="box">
      <div v-for="item in list" :key="item.id" class="item">
        <div>
          <img :src="item.img" alt="">
          <div class="myto">
            <div>我要报名</div>
          </div>
        </div>
        <h2>{{item.title}}</h2>
        <div>
          <span>活动时间:{{item.time}}</span>
          <span>已报名:{{item.pren}}</span>
        </div>
        
      </div>
  </div>
</template>

<script>
export default {
    data() {
      return {
        list:[
          {
            title:'逸品尚居',
            id:'1',
            time:'2020.11.1-2021.10.30',
            pren:'259',
            img:'https://images.sqfcw.com/attachment/build/20201217/cb98c7607c52b15320a32d2f309674e3939c91c1.png?x-oss-process=style/w_8601'
          },
          {
            title:'恒大湖山半岛',
            id:'2',
            time:'2020.11.1-2021.10.30',
            pren:'45',
            img:'https://images.sqfcw.com/attachment/build/20210607/03e04600eac20bb0ba93930c8c0907dd25879a25.png?x-oss-process=style/w_8601'
          },
        ]
      }
    },
}
</script>

<style lang="scss" scoped>
.box{
  width: 100%;
  height: 100%;
  .item{
    width: 100%;
    >h2{
      margin: 10rpx 40rpx;
      font-size: 20px;
      font-weight: bold;
    }
    >div{
      margin: 0 auto;
      width: 90%;
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;
      border-bottom: 1px solid rgb(206, 206, 206);
      >img{
        width: 100%;
      }
      .myto{
        position: absolute;
        >div{
          color: #fff;
          margin-top: 20rpx;
          margin-left: 30rpx;
          border-radius: 30rpx;
          padding: 10rpx 20rpx;
          background: linear-gradient(to right, rgb(255, 132, 101), rgb(251, 119, 141));
        }
      }
    }
    
  }
}
</style>